<template>
  <a-form
    :model="form"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-form-item
      :label="$t('202')"
      :rules="[{ required: true, message: $t('203') }]"
    >
      <a-input v-model:value="form.phone">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item
      :label="$t('204')"
      :rules="[{ required: true, message: $t('205') }]"
    >
      <a-input-password v-model:value="form.pwd">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item
      :label="$t('209')"
      :rules="[{ required: true, message: $t('210') }]"
    >
      <a-input-password v-model:value="form.rePwd">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 16, offset: 8 }">
      <a-button type="primary" @click="doRegister"> {{ $t("208") }} </a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
import { reactive } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import CommonDefine from "@/component/CommonDefine";
import JSEncrypt from "jsencrypt";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const appStore = CommonDefine.appStore();
const form = reactive({
  phone: "",
  pwd: "",
  rePwd: "",
});

var encryptor = new JSEncrypt();
encryptor.setPublicKey(appStore.pubKey);

const doRegister = () => {
  if (
    !CommonDefine.isStringValue(form.pwd) ||
    !CommonDefine.isStringValue(form.rePwd)
  ) {
    CommonDefine.alert(t("205"));
    return;
  }
  if (form.pwd != form.rePwd) {
    CommonDefine.alert(t("211"));
    return;
  }
  let pd = { phone: form.phone, pwd: encryptor.encrypt(form.pwd) };
  CommonDefine.apiPostArm("/api/v1/user/register", pd, (d) => {
    CommonDefine.alert(t("212"));
    form.phone = "";
    form.pwd = "";
    form.rePwd = "";
  });
};
</script>
